<template>
  <div class="banner_box">
    <div class="img_box">
      <img class="img_logo"
           src="../assets/img/logo.png" />
      <!-- <div class="img_mini_box">
        <img class="img1"
             src="../assets/img/nav/a1.png" />
        
      </div> -->
    </div>
    <div class="menu_box">
      <el-menu :default-active="activeIndex"
               class="el-menu-demo"
               mode="horizontal"
               text-color="#000000"
               active-text-color="#ff00ff"
               @select="handleSelect">
        <el-menu-item index="1">首页</el-menu-item>
        <el-menu-item index="2">找对象</el-menu-item>
        <el-menu-item index="3">我要领养</el-menu-item>
        <el-menu-item index="4">爱心领养</el-menu-item>
        <el-menu-item index="5">丢失找寻</el-menu-item>
      </el-menu>
    </div>
    <el-button size="mini"
               @click="loginOut()">退出</el-button>
  </div>
</template>
<script>
export default {
  props: {
    toActiveIndex: ''
  },
  created () {
  },
  data () {
    return {
      activeIndex: this.toActiveIndex
    };
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key)
      let routerPath = '';
      if (key == 1)
        routerPath = '/home';
      if (key == 2)
        routerPath = '/pair';
      if (key == 3)
        routerPath = '/wantAdopt';
      if (key == 4)
        routerPath = '/loveAdopt';
      if (key == 5)
        routerPath = '/lostFind';
      this.$emit('routerPath', routerPath);
    },
    // 修改导航栏激活第几个
    setBannerPath (routerPath) {
      if (routerPath == '/home')
        this.activeIndex = '1'
      if (routerPath == '/pair')
        this.activeIndex = '2'
      if (routerPath == '/wantAdopt')
        this.activeIndex = '3'
      if (routerPath == '/loveAdopt')
        this.activeIndex = '4'
      if (routerPath == '/lostFind')
        this.activeIndex = '5'
    },
    // 退出登录
    loginOut () {
      window.sessionStorage.clear();
      this.$router.push('/login');
    }
  },
  watch: {
    activeIndex: function (val) {
      console.log(val)
    },
    // 监听路由变化，修改导航栏
    $route: {
      handler: function (val, oldVal) {
        this.setBannerPath(val.path)
      },
      // 深度观察监听
      deep: true
    }
  }
}
</script>
<style lang="less" scoped>
.banner_box {
  height: 10%;
  display: flex;
  background-color: rgba(255, 255, 255, 0.589);
  position: relative;
  .img_box {
    text-align: center;
    width: 30%;
    height: auto;
    background-color: rgba(255, 255, 255, 0.356);
    img {
      position: absolute;
      top: 50%;
      transform: translate(0, -40%);
      height: 60%;
    }
  }
  .menu_box {
    width: 70%;
    background-color: rgba(255, 255, 255, 0.356);
    height: auto;
    .el-menu-demo {
      position: absolute;
      top: 50%;
      transform: translate(40%, -50%);
      background-color: rgba(255, 255, 255, 0);
      border-bottom: 0;
    }
  }
  .el-button {
    position: absolute;
    background-color: violet;
    right: 0;
    bottom: 0;
    transform: translate(-50%, -50%);
    color: white;
    width: 5%;
    height: 40%;
  }
}
</style>